<template>
	<div class="wrapper">
		<channel-page-list>
			<template #default="prop">
				<!--条件筛选-->
				<div class="mart-30 marb-30">
					<!--分类-->
					<channel-tabs-category v-model="prop.datas.categoryId" channel="news" @change="initData" />
					<!--标签-->
					<channel-tabs-label v-model="prop.datas.labelId" :top="0" @change="initData" />
				</div>
				<!--列表-->
				<channel-list-text-page
					ref="divRef"
					channel="news"
					:categoryId="prop.datas.categoryId"
					:labelId="prop.datas.labelId"
					:keyword="prop.datas.keyword"
					mode="4/3"
					imgWidth="30%"
					to="/news/show/{0}"
					:pageSize="10"
					:skeRow="2"
					:show="{title:true,info:true,click:true,msg:true,like:true,date:true}" />
			</template>
		</channel-page-list>
	</div>
</template>

<script setup>
	//声明Ref
	const divRef = ref(null)
	//客户端加载分页数据
	const initData = async() => {
		//调用子组件方法
		divRef.value.initData()
	}
	
	//页面完成后执行
	onMounted(() => {
		initData()
	})
</script>